<template>
  <div class="editchannel-container">
    <!-- 我的频道 -->
    <div class="user-channels">
      <div class="top">
        <span class="tit">我的频道</span>
        <van-button
          round
          type="danger"
          class="editBtn"
          @click="isEdit = !isEdit"
          >{{ isEdit ? '完成' : '编辑' }}</van-button
        >
      </div>
      <ul class="user-list">
        <li class="con" v-for="(item, index) in userChannels" :key="index">
          {{ item.name }}
          <van-icon
            name="close"
            class="delBtn"
            v-show="isEdit"
            @click="deleteChannel(item)"
          />
        </li>
      </ul>
    </div>
    <!-- 频道推荐 -->
    <div class="recommend-channels">
      <div class="top">
        <span class="tit">频道推荐</span>
      </div>
      <ul class="user-list recommend-list">
        <li
          class="con"
          v-for="item in remainChannels"
          :key="item.id"
          @click="addChannel(item)"
        >
          {{ '+' + item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  getAllChannels,
  addUserChannel,
  deleteUserChannel
} from '@/api/index.js'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
export default {
  props: {
    userChannels: {
      type: Array,
      required: true
    }
  },
  // 定义属性
  data() {
    return {
      isEdit: false,
      AllChannels: []
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState(['user']),
    // 使用计算属性处理用户没有的频道
    remainChannels() {
      return this.AllChannels.filter(item => {
        return (
          this.userChannels.find(uitem => {
            return item.id === uitem.id
          }) === undefined
        )
      })
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //   1.获取所有频道列表
    async loadAllChannels() {
      const res = await getAllChannels()
      console.log(res)
      this.AllChannels = res.data.data.channels
    },
    // 2.添加频道操作
    async addChannel(item) {
      if (this.isEdit === true) {
        try {
          this.userChannels.push(item)
          if (this.user) {
            // 已登录，数据存储到线上
            const res = await addUserChannel([
              {
                id: item.id, // 频道 id
                seq: this.userChannels.length // 频道的 序号
              }
            ])
            console.log(res)
          } else {
            // 未登录，数据存储到本地
            setItem('channels', this.userChannels)
          }
        } catch (err) {
          console.log(err)
          this.$toast('添加频道失败')
        }
      }
    },
    // 3.删除用户频道
    async deleteChannel(channel) {
      if (this.isEdit === true) {
        try {
          if (this.user) {
            // 已登录，将数据存储到线上
            const res = await deleteUserChannel(channel.id)
            console.log(res)
          } else {
            // 未登录，将数据存储到本地
            setItem('channles', this.userChannels)
          }
        } catch (err) {
          console.log(err)
          this.$toast('删除频道失败，请稍后重试')
        }
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.loadAllChannels()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
.editchannel-container {
  padding: 0 30px;
  //   我的频道
  .top {
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 48px;
    .tit {
      font-family: MicrosoftYaHei;
      font-size: 32px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 36px;
      letter-spacing: 2px;
      color: #333333;
    }
    .editBtn {
      padding: unset;
      background: none;
      color: #f85959;
      height: 47px;
      width: 104px;
      font-size: 20px;
    }
  }
  .user-list {
    display: flex;
    flex-wrap: wrap;
    .con {
      position: relative;
      width: 160px;
      height: 86px;
      margin-right: 16px;
      margin-bottom: 29px;
      font-size: 10px;
      background-color: #f4f5f6;
      border-radius: 6px;
      line-height: 86px;
      letter-spacing: 1px;
      color: #222222;
    }
    .con:hover {
      background-color: #fff;
      border: solid 3px #bbb;
    }
    & li:nth-child(4n + 4) {
      margin-right: unset;
    }
    // 删除频道按钮
    .delBtn {
      position: absolute;
      font-size: 25px;
      right: 0;
    }
  }
  // 推荐频道
  .recommend-channels .top {
    margin-top: 75px;
  }
}
</style>
